<template>
  <div ref='container'></div>
</template>

<script lang="js">
  import * as echarts from 'echarts/lib/echarts.js';
  import 'echarts/lib/chart/pie';

  export default {
    data() {
      return {
        option: {
          series: [
            {
              type: 'pie',
              minAngle: 20,
              color: ['#FE9A38', '#FFC444', '#FC8801', '#FFD426', '#FFA618', '#EB4E2F', '#D73717', '#FF6600'],
              radius: ['50%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'inner'
              },
              emphasis: {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#E1E1E0'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chartList
            }
          ]
        }
      }
    },
    props: ['chartList', 'type'],
    watch: {
      chartList: 'updateChart'
    },
    mounted() {
      const width = document.documentElement.clientWidth
      this.$refs.container.style.width = `${width}px`
      this.$refs.container.style.height = `${width - 100}px`
      this.chart = echarts.init(this.$refs.container)
      this.chart.setOption(this.option, true)
      this.chart.dispatchAction({
        type: 'highlight',
        dataIndex: 0,
      })
      this.chart.on('click', (params) => {
        if (params.dataIndex !== 0) {
          this.chart.dispatchAction({
            type: 'downplay',
            dataIndex: 0
          })
        }
        this.$emit('update:tagText', params.name)
      })
    },
    methods: {
      updateChart() {
        this.chart.clear();
        this.$emit('update:tagText', this.chartList[0].name)
        this.chart = echarts.init(this.$refs.container)
        this.chart.setOption({
          series: [
            {
              type: 'pie',
              minAngle: 20,
              color: ['#FE9A38', '#FFC444', '#FC8801', '#FFD426', '#FFA618', '#EB4E2F', '#D73717', '#FF6600'],
              radius: ['50%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'inner'
              },
              emphasis: {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#E1E1E0'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chartList
            }
          ]
        }, true)
        this.chart.dispatchAction({
          type: 'highlight',
          dataIndex: 0,
        })
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>